<!-- components/modules/VirtualScene.vue -->
<template>
  <div class="virtual-scene">
    <img v-if="sceneFrame" :src="sceneFrame" alt="3D Scene Frame" @error="handleError" />
    <div v-else class="placeholder">加载中...</div>
  </div>
</template>

<script setup>
defineProps({
  sceneFrame: {
    type: String,
    required: true,
  },
})

const handleError = (event) => {
  event.target.style.display = 'none'
  console.error('Failed to load 3D scene frame')
}
</script>

<style scoped>
.virtual-scene {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  position: relative;
}

.virtual-scene img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0px 0px 8px 8px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.virtual-scene .placeholder {
  color: #666;
  font-style: italic;
  text-align: center;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
